<template>
  <div class="serve">
    <!-- 头部 -->
    <HeadPersonal></HeadPersonal>

    <!-- enroll -->
    <div class="enroll">
      <!-- enrollIndex -->
      <div class="enrollIndex">
        <img src="../../static/images/banner3pc.jpg" class="enrollIndexImg1" />
        <img src="../../static/images/banner3mob.jpg" class="enrollIndexImg2" />
        <img src="../../static/images/banner3pc1.jpg" class="enrollIndexImg3" />
        <div class="enrollIndexC">
          <div class="block">
            <div class="enrollIndexCB">
              <div class="enrollIndexCBN">
                <a href="javascript:;" :class="showindex==0?'on':''" @click="enrollIndexCBN(0)">账号登录</a>
                <a
                  href="javascript:;"
                  :class="showindex==1?'on':''"
                  @click="enrollIndexCBN(1)"
                >手机快捷登录</a>
                <a href="javascript:;" :class="showindex==2?'on':''" @click="enrollIndexCBN(2)">扫码登录</a>
                <div class="clear"></div>
              </div>
              <div class="enrollIndexCBS">
                <!-- 账号登录 -->
                <div class="enrollIndexCBSO" v-if="showindex==0">
                  <div class="enrollIndexCBSO1">
                    <div class="enrollIndexCBSO1I">
                      <label>
                        <img src="../../static/images/enrollIndexCBSO1I1.png" />
                      </label>
                      <input type="text" placeholder="邮箱/用户名/手机号" v-model="admin" />
                      <div class="clear"></div>
                    </div>
                    <div class="enrollIndexCBSO1I">
                      <label>
                        <img src="../../static/images/enrollIndexCBSO1I2.png" />
                      </label>
                      <input type="password" placeholder="输入密码" v-model="password" />
                      <div class="clear"></div>
                    </div>
                    <nuxt-link :to="{name: 'enroll-enrollPwdOne'}" class="enrollIndexCBSO1W">忘记密码</nuxt-link>
                    <input
                      type="submit"
                      value="登录"
                      class="enrollIndexCBSO1sub"
                      @click="submitAdmin"
                    />
                    <span>* 系统升级，老用户请重新注册</span>
                    <nuxt-link :to="{name: 'register-registerOne'}" class="enrollIndexCBSO1Z">
                      <img src="../../static/images/enrollIndexCBSO1Z.png" />立即注册
                    </nuxt-link>
                  </div>
                </div>
                <!-- 手机快捷登录 -->
                <div class="enrollIndexCBSO" v-if="showindex==1">
                  <div class="enrollIndexCBSO1">
                    <div class="enrollIndexCBSO1I">
                      <label>
                        <img src="../../static/images/enrollIndexCBSO1I1.png" />
                      </label>
                      <input type="text" placeholder="输入手机号" v-model="phone" />
                      <div class="clear"></div>
                    </div>
                    <div class="enrollIndexCBSO1I">
                      <label>
                        <img src="../../static/images/enrollIndexCBSO1I2.png" />
                      </label>
                      <input type="text" placeholder="输入验证码" v-model="code" />
                      <p v-show="show" @click="sendCode">发送验证码</p>
                      <p v-show="!show" >{{count}} s</p>
                      <div class="clear"></div>
                    </div>
                    <nuxt-link :to="{name: 'enroll-enrollPwdOne'}" class="enrollIndexCBSO1W">忘记密码</nuxt-link>
                    <input type="submit" value="登录" class="enrollIndexCBSO1sub" @click="submitCode" />
                    <span>* 系统升级，老用户请重新注册</span>
                    <nuxt-link :to="{name: 'register-registerOne'}" class="enrollIndexCBSO1Z">
                      <img src="../../static/images/enrollIndexCBSO1Z.png" />立即注册
                    </nuxt-link>
                  </div>
                </div>
                <!-- 扫码登录 -->
                <div class="enrollIndexCBSO" v-if="showindex==2">
                  <div class="enrollIndexCBSO3">
                    <div class="enrollIndexCBSO3T">
                      <img src="../../static/images/code1.png" />
                      <p>
                        打开
                        <em>手机微信</em> 扫描二维码
                      </p>
                    </div>
                    <div class="enrollIndexCBSO3B">
                      <p>
                        <img src="../../static/images/enrollIndexCBSO3B1.png" />安全
                      </p>
                      <p>
                        <img src="../../static/images/enrollIndexCBSO3B2.png" />免输入
                      </p>
                      <p>
                        <img src="../../static/images/enrollIndexCBSO3B3.png" />快捷
                      </p>
                    </div>
                    <span>* 系统升级，老用户请重新注册</span>
                    <nuxt-link :to="{name: 'register-registerOne'}" class="enrollIndexCBSO1Z">
                      <img src="../../static/images/enrollIndexCBSO1Z.png" />立即注册
                    </nuxt-link>
                  </div>
                </div>
              </div>
            </div>
            <div class="clear"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <HomeHooter></HomeHooter>
  </div>
</template>

<script>
import qs from 'qs';
import $ from "jquery";
import "@/assets/css/home.css";
import "@/assets/css/personal.css";
import HeadPersonal from "@/components/headpersonal";
import HomeHooter from "@/components/footer";
import md5 from "js-md5";

export default {
  name: "enroll",
  data() {
    return {
      showindex: 0,
      admin: "", // 账户登录账号
      password: "", // 账户登录密码
      phone: "", //手机号
      code: "", //验证码
       show:true, 
      timer:null, 
      count:''
    };
  },
  components: {
    HeadPersonal,
    HomeHooter
  },
  methods: {
    enrollIndexCBN(e) {
      if(e==2){
        this.$message({
          message: "敬请期待",
          type: "warning"
        });
        return
      }
      this.showindex = e;
    },

    // 账户登录
    submitAdmin() {
      let _this=this;
      if (this.admin === "") {
        this.$message({
          message: "请填写账号",
          type: "warning"
        });
        return false;
      }
      if (this.password === "") {
        this.$message({
          message: "请填写密码",
          type: "warning"
        });
        return false;
      }

      let id = this.$axios;
      let params = qs .stringify({
        account:this.admin,
        password:md5(this.password)
      });
      this.$api.member.userLogin(id, params).then(res => {
        let result = res.data;
        if (result.code === 1) {
          window.sessionStorage.setItem("userInfo", result.data.oid);
          this.$message({
            message: result.msg,
            type: "success",
            onClose:function(){
              _this.$router.push("/member");
            }
          });
        } else {
          this.$message({
            message: result.msg,
            type: "warning"
          });
        }
      });
    },
    // 发送验证码
    sendCode() {
      var reg = /^1[3|5|7|8]\d{9}$/g;
      if (this.phone === "") {
        this.$message({
          message: "请填写手机号",
          type: "warning"
        });
        return false;
      }
      if (!reg.test(this.phone)) {
        this.$message({
          message: "请填写正确的手机号",
          type: "warning"
        });
        return false;
      }
      const TIME_COUNT = 60;
     if (!this.timer) {
       this.count = TIME_COUNT;
       this.show = false;
       this.timer = setInterval(() => {
       if (this.count > 0 && this.count <= TIME_COUNT) {
         this.count--;
        } else {
         this.show = true;
         clearInterval(this.timer);
         this.timer = null;
        }
       }, 1000)
      }
      let id = this.$axios;
      const params = new URLSearchParams();
      params.append("phone", this.phone);
      this.$api.member.userSendVrifyCode(id, params).then(res => {
        let result = res.data;
        if (result.code === 1) {
          this.$message({
            message: result.msg,
            type: "success"
          });
        } else {
          this.$message({
            message: result.msg,
            type: "warning"
          });
        }
      });
    },
    // 验证码登录
    submitCode() {
      let _this=this;
      var reg = /^1[3|5|7|8]\d{9}$/g;
      if (this.phone === "") {
        this.$message({
          message: "请填写手机号",
          type: "warning"
        });
        return false;
      }
      if (this.code === "") {
        this.$message({
          message: "请填写验证码",
          type: "warning"
        });
        return false;
      }
      if (!reg.test(this.phone)) {
        this.$message({
          message: "请填写正确的手机号",
          type: "warning"
        });
        return false;
      }
      
      let id = this.$axios;
      const params = qs .stringify({
        phone:this.phone,
        vrifyCode:this.code
      });;
      this.$api.member.userPhoneLogin(id, params).then(res => {
        let result = res.data;
        if (result.code === 1) {
          window.sessionStorage.setItem("userInfo", result.data.oid);
          this.$message({
            message: result.msg,
            type: "success",
            onClose:function(){
              _this.$router.push("/member");
            }
          });
        } else {
          this.$message({
            message: result.msg,
            type: "warning"
          });
        }
      });
    }
  },
};
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?bb2e608148cbb8f2c5ef056a37ebb06b";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</script>

<style scoped>
</style>